<template>
    <div class="query">
        <!-- 高级查询 -->
        <el-dialog title="高级查询" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
            <div>
                <table>
                    <tr>
                        <td>条款序号：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.clauseCode" placeholder="请选择" size="mini" clearable filterable multiple collapse-tags>
                                <el-option 
                                    :label="item.dictKeyName"
                                    :value="item.dictKey" 
                                    v-for="(item) in clauseCodeSelect" 
                                    :key="item.dictKey"
                                >{{item.dictKeyName}}</el-option>
                            </el-select>
                        </td>
                        <td>条款状态：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.clauseStatus" placeholder="请选择" size="mini" clearable>
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="停用" value="0"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>条款原文：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.clauseText" placeholder="请选择" size="mini" clearable filterable>
                                <el-option 
                                    :label="item.dictKeyName"
                                    :value="item.dictKey" 
                                    v-for="(item) in clauseTextSelect" 
                                    :key="item.dictKey"
                                >{{item.dictKeyName}}</el-option>
                            </el-select>
                        </td>
                        <td>版本号：</td>
                        <td>
                            <el-input v-model="indexClauseRequest.versionNumber" placeholder="请输入内容" size="mini"> </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>条款号：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.clauseNo" placeholder="请选择" size="mini" clearable filterable>
                                <el-option 
                                    :label="item.dictKeyName"
                                    :value="item.dictKey" 
                                    v-for="(item) in clauseNoSelect" 
                                    :key="item.dictKey"
                                >{{item.dictKeyName}}</el-option>
                            </el-select>
                        </td>
                        <td>版本是否有效：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.versionValid" placeholder="请选择" size="mini" clearable>
                                <el-option label="有效" value="1"></el-option>
                                <el-option label="无效" value="0"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>条款适用产品：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.suitableFund" placeholder="请选择" size="mini" clearable filterable multiple collapse-tags>
                                <el-option label="公募产品" value="1"></el-option>
                                <el-option label="私募产品" value="2"></el-option>
                                <el-option label="货基产品" value="3"></el-option>
                            </el-select>
                        </td>
                        <td>是否可被动超限：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.passiveTransfinite" placeholder="请选择" size="mini" clearable>
                                <el-option label="是" :value="true"></el-option>
                                <el-option label="否" :value="false"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>风控系统是否支持：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.realTimeSupport" placeholder="请选择" size="mini" clearable>
                                <el-option label="支持" value="1"></el-option>
                                <el-option label="部分支持" value="2"></el-option>
                                <el-option label="不支持" value="3"></el-option>
                            </el-select>
                        </td>
                        <td>恒生系统能否支持：</td>
                        <td>
                            <el-select v-model="indexClauseRequest.hdSupport" placeholder="请选择" size="mini" clearable>
                                <el-option label="支持" value="1"></el-option>
                                <el-option label="部分支持" value="2"></el-option>
                                <el-option label="不支持" value="3"></el-option>
                            </el-select>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClauseQuery('cancel')">取 消</el-button>
                <el-button @click="handleClauseQuery('reset')">重 置</el-button>
                <el-button type="primary" @click="handleClauseQuery('confirm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({
    name: 'ClauseQueryDialog',
    components: {},
})
export default class ClauseQueryDialog extends Vue {
    @Prop() clauseQueryDialog;
    @Prop() treeNodeData;
    @Prop() clauseQueryParam;
    private dialogVisible: boolean = false;
    private clauseCodeSelect = []; // 条款编号下拉数据
    private clauseNoSelect = []; // 条款号下拉数据
    private clauseTextSelect = []; // 条款原文下拉数据
    private queryList = {
        type: '',
    };
    indexClauseRequest = {
        clauseCode: '', // 条款序号
        clauseStatus: '', // 条款状态
        clauseText: '', // 条款原文
        versionNumber: '', // 版本号
        clauseNo: '', // 条款号
        versionValid: '', // 版本是否有效
        suitableFund: '', // 条款适用产品
        passiveTransfinite: '', // 是否可被动超限
        realTimeSupport: '', // 风控系统是否支持
        hdSupport: '', // 恒生系统能否支持
    }
    @Watch('clauseQueryDialog')
    watchClauseQueryDialog(val) {
        this.dialogVisible = val;
        if (val == true) {
            this.getClauseCodeSelect();
            this.getClauseNoSelect();
            this.getClauseTextSelect();
            Object.keys(this.indexClauseRequest).forEach((key) => {
                console.log(key, this.clauseQueryParam[key])
              this.indexClauseRequest[key] = this.clauseQueryParam[key]
            })
            console.log('indexClauseRequest', this.indexClauseRequest)
        } else {
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitClauseQuery', false, '')
        }
    }
    // 获取条款编号下拉数据
    getClauseCodeSelect() {
        this.$axios.post('/indexClause/clauseCodeSelect', {
            clauseSourceCode: this.treeNodeData.id
        }).then((res: any) => {
            this.clauseCodeSelect = [];
            if (res) {
                res.forEach(item => this.clauseCodeSelect.push(item))    
            }
        }); 
    }
    // 获取条款号下拉数据
    getClauseNoSelect() {
        this.$axios.post('/indexClause/clauseNoSelect', {
            clauseSourceCode: this.treeNodeData.id
        }).then((res: any) => {
            this.clauseNoSelect = [];
            if (res) {
                res.forEach(item => this.clauseNoSelect.push(item))    
            }
        }); 
    }
    // 获取条款原文下拉数据
    getClauseTextSelect() {
        this.$axios.post('/indexClause/clauseTextSelect', {
            clauseSourceCode: this.treeNodeData.id
        }).then((res: any) => {
            this.clauseTextSelect = [];
            if (res) {
                res.forEach(item => this.clauseTextSelect.push(item))    
            }
        }); 
    }
    handleClauseQuery(parameter) {
        if (parameter == 'cancel') {
            // this.$emit('emitClauseQuery', false, '');
            this.dialogVisible = false;
        } else if (parameter == 'confirm') {
            this.$emit('emitClauseQuery', false, this.indexClauseRequest)
        } else if (parameter == 'reset') {
            this.indexClauseRequest = {
                clauseCode: '', // 条款序号
                clauseStatus: '', // 条款状态
                clauseText: '', // 条款原文
                versionNumber: '', // 版本号
                clauseNo: '', // 条款号
                versionValid: '', // 版本是否有效
                suitableFund: '', // 条款适用产品
                passiveTransfinite: null, // 是否可被动超限
                realTimeSupport: '', // 风控系统是否支持
                hdSupport: '', // 恒生系统能否支持
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.query {
    // height: calc(98vh - 7px);
    background: #ffffff;
}
table {
    border-spacing: 10px;
    tr {
        td:nth-child(1),
        td:nth-child(3) {
            text-align: right;
            width: 130px !important;
        }
    }
}
</style>
